// 当前用户
var username;
// 消息接收者
var toName;
// 消息接收者是否在线
var toNameOnline;


//登录后显示用户名和状态
$(function () {
    $.ajax({
        //是否异步,此项目此处必须是false
        async: false,
        //请求方式
        type: 'GET',
        //请求url
        url: "/chat/getUsername",
        success: function (res) {
            username = res;
            //$('#chatMeu').html('<p>用户：' + res + "<span style='float: right;color: greenyellow; height: 20px'>在线</span></p>")
        }
    });

    //创建websocket对象
    var ws = new WebSocket("ws://localhost:8080/chat");


    // 客户端和服务端建立连接后触发
    ws.onopen = function () {
        $('#chatMeu').html('<p>用户：' + username + "<span style='color: greenyellow; height: 20px'>（在线）</span></p>")
    };


    // 接收到服务端发送过来的消息后触发
    ws.onmessage = function (evt) {
        //获取数据
        var dataStr = evt.data;
        // jsonData 格式举例（需要根据systemMsgFlag判断是否是系统消息，具体内容和含义请看后端代码中的MessageUtils中的注释）
        var jsonData = JSON.parse(dataStr);
        // 判断是否是系统消息
        if (jsonData.isSystem) {
            // 系统消息
            //1.好友列表处理
            var friendsList = "";
            var systemMsg = "";
            var allNames = jsonData.message;
            toNameOnline = false;
            for (var name of allNames) {
                if (username !== name) {
                    friendsList += "<li><a style='text-decoration: underline' onclick='chatWith(\"" + name + "\")'>" + name + "</a></li>";
                    systemMsg += "<li>" + name + " 上线啦！</li>";
                }
                if (toName == name) {
                    toNameOnline = true;
                }
            }
            //渲染页面
            $("#friendsList").html(friendsList);
            $("#systemMsg").html(systemMsg);
        } else {
            // 不是系统消息，是发送给当前登录用户的消息
            var data = jsonData.message;
            var cnt = "<div class=\"atalk\"><span id=\"asay\">" + data + "</span></div>";
            // 判断发送过来的消息，是否是当前正在聊天的用户，如果是，直接将消息拼接在页面上
            if (toName === jsonData.fromName) {
                $("#chatCnt").append(cnt);
            }
            // 将消息内容存储到sessionStorage中，其中sessionStorage的key是向当前用户发送消息的用户名称，value是两者之间的聊天记录
            var chatData = sessionStorage.getItem(jsonData.fromName);
            // 在原有消息基础上，拼接最新的消息内容
            if (chatData != null) {
                cnt = chatData + cnt;
            }
            // 更新当前用户和发送消息用户之间的最新消息内容
            sessionStorage.setItem(jsonData.fromName, cnt);
        }
    };

    // 关闭连接触发
    ws.onclose = function () {
        $('#chatMeu').html('<p>用户' + username + "<span style='color: #d50a0a; height: 20px'>（离线）</span></p>")
    };

    // 点击发送按钮触发，然后向服务端发送消息
    $("#submit").click(function () {
        // 判断toName用户（被发送消息的用户）是否在线
        if (!toNameOnline) {
            alert("对方已经离线");
            return;
        }
        // 获取输入框中的内容
        var data = $("#tex_content").val();
        if (data == null || data === "") {
            alert("输入内容不能为空");
            return;
        }
        //点击发送后，清空输入内容框架
        $("#tex_content").val("");
        // 组合消息
        var sendJson = {"toName": toName, "message": data};
        // 聊天框显示发送内容
        var cnt = "<div  class=\"btalk\"><span id=\"bsay\">" + data + "</span></div>";
        // 将消息内容显示在当前聊天框中
        $("#chatCnt").append(cnt);
        // 获取当前用户和被发送消息的用户的以往发送过的消息内容
        var chatData = sessionStorage.getItem(toName);
        // 将原有的消息拼接到该条消息的前面
        if (chatData != null) {
            cnt = chatData + cnt;
        }
        // 将当前用户和被发送消息的用户的最新消息内容存储起来，以备后续需要的时候使用
        sessionStorage.setItem(toName, cnt);
        // 发送数据给服务端
        ws.send(JSON.stringify(sendJson));
    });

});


//点击好友列表后，执行的动作
function chatWith(name) {
    toName = name;
    toNameOnline = true;
    //再次点击好友聊天，需要删除原来的”和xxx"聊天的提示
    $('#p1').remove();
    $('#chatMeu').append('<p id="p1" style="text-align: center">正在和<b style="color: #db41ca ">' + name + '</b>聊天</p>');
    $('#chatMain').css("display", "inline");
    //清空聊天区
    $("#chatCnt").html("");
    //当点击聊天人列表时，需要获与之对应的聊天记录，聊天记录存放在sessionStorage中
    var chatData = sessionStorage.getItem(toName);
    if (chatData != null) {
        //渲染聊天数据到聊天区
        $("#chatCnt").html(chatData);
    }
}